<template>
  <div>
      <h1>{{ count }}</h1>
      <button @click="count++">修改count的值</button>
      <br>
      <h1>{{ obj }}</h1>.
      <button @click="obj.eat[0] = '小笼包'">修改reactive对象的eat</button>
      <br><br>
      <button @click="count ++ ,obj.eat[1] = '猪头肉 '">修改多个属性</button>
  </div>
</template>


<script setup lang="ts">
import { ref,watch,reactive } from 'vue';
// 数据
let count = ref(20)
let obj = reactive({
  name:'李哈哈',
  age:20,
  eat:['大包子','红烧鱼','营养快线']
})

// Watch监听

// 第一种写法(监听ref对象): 参数1:监听的数据源;参数2:发生变化的新值,参数3:配置对象,可开启深度和立即监听
//            Watch的返回值,调用就是停止监视
// let result =  watch(count,(newValue,odlValue)=>{
//     console.log(newValue,odlValue)
// },{deep:true,immediate:true})
// console.log(result)
// result()


// 第二种写法(监听reactive对象)参数1:监听的数据源;参数2:发生变化的新值,没有旧值,参数3:配置对象,可开启深度和立即监听
//            Watch的返回值,调用就是停止监视
// let result = watch(obj,(newValue,odlValue)=>{  
//   console.log(newValue,odlValue)
// })
// result()


//watch第三种写法:监听数值的变化,箭头函数写法|参数1:如果是ref对象,一般监视不到,必须是ref对象的value值,或者是开启深度监听
//               参数2:是监听到新值,参数3:配置对象(深度和立即监听);调用返回值就是停止监听

//  let res =  watch(()=>count,(newValue,odlValue)=>{
//   console.log(newValue.value,odlValue.value)
// },{
//   deep:true
// })
// res()


// watch第四种写法:可以监听多个对象,写成数组的形式 参数1:监听多个对象;参数2:监听到的新值,参数3:配置对象
watch([count,()=>obj],(newValue,odlValue)=>{
  console.log(newValue,odlValue)
},{
  deep:true,
  immediate:true
})
</script>

<style scoped>

</style>